<template>
    <div class="container">
        <el-dropdown trigger="click" size="large">
            <span class="el-dropdown-link">
                <span class="self-message">个人中心</span>
                <span><i class="iconfont icon-user"></i></span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="个人信息" @click="toUserInfo()">
                      个人信息
                    </el-dropdown-item>
                    <el-dropdown-item command="退出登录" @click="toLogout">
                        <span class="logout-span">
                                退出登录
                        </span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

    </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import myAxios from "../../plugins/myAxios.js";
import {ElMessage, ElMessageBox} from "element-plus";
import UpdateUser from "./UpdateUser.vue";
import DisplayUser from "./DisplayUser.vue";
import {onMounted} from "vue";

const router = useRouter();

const dropdownList = ['退出登录'];

/**
 * 跳转到个人信息页
 */
const toUserInfo = () => {
  // router.push({path: '/userIndex/userInfo',replace:true, state: { userId:123 }});
  router.push({path: '/userIndex/userInfo',replace:true});
}


//退出登录
const toLogout = async () => {
    ElMessageBox.confirm(
        '是否确定退出登录',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await myAxios.post('/user/logout')
            if (res.code === 0 && res.data) {
                ElMessage.success("登出成功")
                router.push({path: '/login', replace: true})
                return false;
            } else {
                ElMessage.error("系统出错，请重试")
                return false;
            }
        })
        .catch(() => {
            ElMessage({
                type: 'success',
                message: '取消登出',
            })
        })


}

</script>

<style scoped lang="less">
@import "src/assets/css/common.less";

.container {
  font-size: @TopRightFontSize;
  //background: royalblue;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logout-span {
  color: red;
}

.iconfont {
  font-size: 25px;
  color: black;
  cursor: pointer;
}

.grid-content {
  min-height: 36px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  .self-message {
    display: inline-block;
    margin-right: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    cursor: pointer;
  }
}

.el-dropdown-link:hover span, .el-dropdown-link:hover span i {
  color: var(--el-color-primary);
}


</style>